<template>
  <div
    class="home-dictionary"
    ref="dictionary"
    oncontextmenu="window.event.returnValue=false"
  >
    <el-tree
      :data="modelFileList"
      highlight-current
      default-expand-all
      :props="defaultProps"
      :expand-on-click-node="false"
      @node-click="handleItem"
      @node-contextmenu="handleRightItem"
    >

      <span
        class="custom-tree-node"
        slot-scope="{ node, data }"
      >
        <span>
          <i :class="data.checkIcon"></i>
          {{ node.label }}
        </span>
      </span>

    </el-tree>

    <!-- 右键 -->
    <rightClickMenuDialog v-if="isRightClickMenu"></rightClickMenuDialog>

  </div>
</template>

<script>
import rightClickMenuDialog from "./rightClickMenuDialog/index";
const modelFileList = [
  {
    label: "目录1",
    checkIcon: "el-icon-s-cooperation",
    children: [
      { label: "目录1.1", checkIcon: "el-icon-s-marketing" },
      { label: "目录1.2", checkIcon: "el-icon-s-marketing" },
    ],
  },
  {
    label: "目录2",
    checkIcon: "el-icon-s-cooperation",
    children: [
      { label: "目录2.1", checkIcon: "el-icon-s-marketing" },
      { label: "目录2.2", checkIcon: "el-icon-s-marketing" },
    ],
  },
  {
    label: "目录3",
    checkIcon: "el-icon-s-cooperation",
    children: [
      { label: "目录3.1", checkIcon: "el-icon-s-marketing" },
      { label: "目录3.2", checkIcon: "el-icon-s-marketing" },
    ],
  },
  {
    label: "目录4",
    checkIcon: "el-icon-picture",
  },
  {
    label: "目录5",
    checkIcon: "el-icon-picture",
  },
];
import rightMenuMixin from "./rightMenuMixin";
import { item1, item2, item3, item4 } from "./formConfig";
export default {
  name: "homeDictionary",
  data() {
    return {
      modelFileList,
      defaultProps: {
        children: "children",
        label: "label",
      },
      menuLeft: 0,
      menuTop: 0,
      menuData: [{ name: "看看" }],
    };
  },
  components: {
    rightClickMenuDialog,
  },
  mixins: [rightMenuMixin],
  mounted() {
    document.body.onclick = () => {
      this.isRightClickMenu = false;
    };
  },

  methods: {
    // 点击某一项
    handleItem(item) {
      console.log("left", item);
      let obj = {};
      if (
        item.label == "目录1.1" ||
        item.label == "目录5" ||
        item.label == "目录1"
      ) {
        obj = { item: item1, title: item.label };
      }
      if (
        item.label == "目录1.2" ||
        item.label == "目录4" ||
        item.label == "目录2"
      ) {
        obj = { item: item2, title: item.label };
      }
      if (
        item.label == "目录2.1" ||
        item.label == "目录3.1" ||
        item.label == "目录3"
      ) {
        obj = { item: item3, title: item.label };
      }
      if (item.label == "目录2.2" || item.label == "目录3.2") {
        obj = { item: item4, title: item.label };
      }
      this.$store.commit("setPageFormConfig", obj);
    },
    // 右键点击
    handleRightItem(e, item) {
      this.isRightClickMenu = false;
      let positonInfo = {
        x: e.clientX + 23,
        y: e.clientY,
      };
      this.$store.commit("setRightMenuPosition", positonInfo);

      this.selectMenuTtem = item;
      setTimeout(() => {
        this.isRightClickMenu = true;
      }, 1);
    },
  },
};
</script>

<style lang="scss">
.home-dictionary {
  width: 300px;
  margin: 20px;
  .el-tree {
    font-size: 14px;
  }
  .pull-right {
    float: right;
  }
  li {
    list-style: none;
  }
}
</style>